<div class="page page-table">

    <div class="row ui-section" data-ng-controller="ListaEjerciciosCtrl">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header" data-translate="EXERCISE_MAINTENANCE"></h2>
        </div>
        <div class="col-md-12">
            <section class="panel panel-default table-dynamic">
                <div class="table-filters">
                    <div class="row">
                        <div class="col-sm-4 col-xs-6">
                            <form>
                                <input type="text"
                                       placeholder="Busqueda..."
                                       class="form-control"
                                       data-ng-model="searchKeywords"
                                       data-ng-keyup="search()">
                            </form>
                        </div>
                        <div class="col-sm-3 col-xs-6 filter-result-info">
                            <span>
                                Mostrando {{filteredStores.length}}/{{listOfItems.length}} entradas
                            </span>
                        </div>
                        <div class="col-sm-5 text-right">
                            <md-button href="#/musculos/registrar"  class="md-primary"><span data-translate="GENERIC_FORM_CTA_ADD"></span></md-button>
                        </div>
                    </div>
                </div>

                <table class="table table-bordered table-striped table-responsive">
                    <thead>
                    <tr>
                        <th><div class="th">
                            Nombre
                                    <span class="fa fa-angle-up"
                                          data-ng-click=" order('Nombre') "
                                          data-ng-class="{active: row == 'Nombre'}"></span>
                                    <span class="fa fa-angle-down"
                                          data-ng-click=" order('-Nombre') "
                                          data-ng-class="{active: row == '-Nombre'}"></span>
                        </div></th>
                        <th><div class="th">
                            Segundo nombre
                                    <span class="fa fa-angle-up"
                                          data-ng-click=" order('Segundonombre') "
                                          data-ng-class="{active: row == 'Segundonombre'}"></span>
                                    <span class="fa fa-angle-down"
                                          data-ng-click=" order('-Segundonombre') "
                                          data-ng-class="{active: row == '-Segundonombre'}"></span>
                        </div></th>
                        <th><div class="th">
                            Posición inicial
                                    <span class="fa fa-angle-up"
                                          data-ng-click=" order('PosInicial') "
                                          data-ng-class="{active: row == 'PosInicial'}"></span>
                                    <span class="fa fa-angle-down"
                                          data-ng-click=" order('-PosInicial') "
                                          data-ng-class="{active: row == '-PosInicial'}"></span>
                        </div></th>
                        <th><div class="th">
                            Posición final
                                    <span class="fa fa-angle-up"
                                          data-ng-click=" order('PosFinal') "
                                          data-ng-class="{active: row == 'PosFinal'}"></span>
                                    <span class="fa fa-angle-down"
                                          data-ng-click=" order('-PosFinal') "
                                          data-ng-class="{active: row == '-PosFinal'}"></span>
                        </div></th>

                        <th><div class="th">
                            Indicaciones
                                    <span class="fa fa-angle-up"
                                          data-ng-click=" order('Indicaciones') "
                                          data-ng-class="{active: row == 'Indicaciones'}"></span>
                                    <span class="fa fa-angle-down"
                                          data-ng-click=" order('-Indicaciones') "
                                          data-ng-class="{active: row == '-Indicaciones'}"></span>
                        </div></th>

                        <th><div class="th">
                            Errores
                                    <span class="fa fa-angle-up"
                                          data-ng-click=" order('Errores') "
                                          data-ng-class="{active: row == 'Errores'}"></span>
                                    <span class="fa fa-angle-down"
                                          data-ng-click=" order('-Errores') "
                                          data-ng-class="{active: row == '-Errores'}"></span>
                        </div></th>

                        <th class="actions-column"><div class="th">
                            Acciones
                        </div></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr data-ng-repeat="item in currentPageItems">
                        <td>{{item.Nombre}}</td>
                        <td>{{item.Segundonombre}}</td>
                        <td>{{item.PosInicial}}</td>
                        <td>{{item.PosFinal}}</td>
                        <td>{{item.Indicaciones}}</td>
                        <td>{{item.Errores}}</td>
                        <td>
                            <md-button href="#/musculos/editar/{{item.Id}}" aria-label="Editar" class="md-icon-button"><span class="imd imd-mode-edit"></span></md-button><span class="space"></span>
                            <md-button data-ng-click="Eliminar(item.Id)" aria-label="Eliminar" class="md-icon-button"><span class="imd imd-delete"></span></md-button>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <footer class="table-footer">
                    <div class="row">
                        <div class="col-md-6 page-num-info">
                            <span>
                                Mostrar
                                <select data-ng-model="numPerPage"
                                        data-ng-options="num for num in numPerPageOpt"
                                        data-ng-change="onNumPerPageChange()">
                                </select>
                                entradas por pagina
                            </span>
                        </div>
                        <div class="col-md-6 text-right pagination-container">
                            <pagination class="pagination-sm"
                                        ng-model="currentPage"
                                        total-items="filteredStores.length"
                                        max-size="4"
                                        ng-change="select(currentPage)"
                                        items-per-page="numPerPage"
                                        rotate="false"
                                        previous-text="&lsaquo;" next-text="&rsaquo;"
                                        boundary-links="true"></pagination>
                        </div>
                    </div>
                </footer>
            </section>
        </div>
    </div>

</div>